<!-- [JS-BGE] Java Script (kit_background.php only) -->
<script type="text/javascript">
    $(document).ready(function() {

        /* ======================================================================
         Distinction of mobile or desktop
         ====================================================================== */

        $(function() {
            if (isMobile()) { //■ For Mobile ■

                /* Basic setting (jQuery UI)
                 ---------------------------------------------------------------------- */
                $('.bg_pic_con').draggable();
                $('.bg_pic_con').resizable();
                $("#slider_texture, #slider_pic, #slider_envelop, #slider_effect").slider();


                /* Layer 3 - 'Main image(.bg_pic_con)' z-index change
                 ★★★ TIP : 이미지 드래그를 원활히 하기 위해 디스플레이를 터치하기만 해도 '메인사진'의 z-index를 최상위로 변경.
                 ---------------------------------------------------------------------- */
                $('.bg_pic_layer, .bg_color_layer, .bg_envelop_layer, .bg_effect_layer').mousedown(function() {
                    $('.bg_pic_layer').css({'z-index': '9'});
                });


                /* Layer 3 - 'Main image(.bg_pic_con)' control
                 ---------------------------------------------------------------------- */
                $('.bg_pic_con').each(function() {
                    $(this).mousedown(function() { //When the touch down
                        $(this).addClass('border-2s-ly bshadow-00505 bgc-w03'); //Add new class (Highlighting)
                        $(this).children('.ui-resizable-handle').css({'visibility': 'visible'}); //Show resize handle (Child elements)
                        $(this).css({'z-index': '2'}); //I am to top
                        $(this).siblings().css({'z-index': '1'}); //Brother elements(siblings) is to bottom
                        $(this).children('.bgpic_img').css({'opacity': '0.5'}); //Add opacity 50%
                        $(this).removeClass('bg_pic_siblings').addClass('bg_pic_target'); //Change my class name ('bg_pic_target')
                        $(this).siblings().removeClass('bg_pic_target').addClass('bg_pic_siblings'); //Change brother's(siblings) class name ('bg_pic_siblings')
                        $(this).siblings().removeClass('border-2s-ly bshadow-00505 bgc-w03'); //Remove class name
                        $(this).siblings().children('.ui-resizable-handle').css({'visibility': 'hidden'}); //Hide resize handle
                        $(this).siblings().children('.bgpic_img').css({'opacity': '1'}); //Remove opacity (Brother elements)
                    });

                    $('.btn_bgpic_hide').click(function() { //When the touch up
                        $('.bg_pic_target').removeClass('border-2s-ly bshadow-00505 bgc-w03'); //Remove class
                        $('.bg_pic_target').children('.ui-resizable-handle').css({'visibility': 'hidden'}); //Hide resize handle (Child elements)
                        $('.bg_pic_target').children('.bgpic_img').css({'opacity': '1'}); //Remove opacity (Child elements)
                    });
                });

            } else { //■ For Desktop ■

                /* Basic setting (jQuery UI)
                 ---------------------------------------------------------------------- */
                $('.bg_pic_con').draggable();
                $('.bg_pic_con').resizable();


                /* Layer 3 - 'Main image(.bg_pic_con)' z-index change
                 ★★★ TIP : 이미지 드래그를 원활히 하기 위해 화면에 마우스를 갖다대기만 해도 3층의 z-index를 최상위로 변경.
                 ---------------------------------------------------------------------- */
                $('.bg_pic_layer, .bg_color_layer, .bg_envelop_layer, .bg_effect_layer').mouseover(function() {
                    $('.bg_pic_layer').css({'z-index': '9'});
                });
                $('.bg_pic_layer, .bg_color_layer, .bg_envelop_layer, .bg_effect_layer').mouseout(function() {
                    $('.bg_pic_layer').css({'z-index': '3'}); //z-index restoration
                });


                /* Layer 3 - 'Main image(.bg_pic_con)' control
                 ---------------------------------------------------------------------- */
                $('.bg_pic_con').each(function() {
                    //On mouse over
                    $(this).mouseover(function() {
                        $(this).addClass('border-2s-ly bshadow-00505 bgc-w03'); //Add new class (Highlighting)
                        $(this).children('.ui-resizable-handle').css({'visibility': 'visible'}); //Show resize handle (Child elements)
                    });

                    //On mouse out
                    $(this).mouseout(function() {
                        $(this).removeClass('border-2s-ly bshadow-00505 bgc-w03'); //Remove class
                        $(this).children('.ui-resizable-handle').css({'visibility': 'hidden'}); //Hide resize handle (Child elements)
                    });

                    //On mouse down
                    $(this).mousedown(function() {
                        $(this).css({'z-index': '2'}); //I am to top
                        $(this).siblings().css({'z-index': '1'}); //Brother elements(siblings) is to bottom
                        //$(this).children('.bgpic_img').css({'opacity':'0.5'}); //Add opacity 50%
                        $(this).children('.bgpic_img').addClass('pic_inner'); //Change my class name ('pic_inner')
                        $(this).siblings().children('.bgpic_img').removeClass('pic_inner'); //Change brother's(siblings) class name ('pic_inner')
                    });

                    //On mouse up
                    $(this).mouseup(function() {

                    });
                });

            }
        });


        /* ======================================================================
         Layer 2 - 'bg_texture' Draggable
         ====================================================================== */

         var $bg = $('.bg_texture'),
         data = $('#data_texture')[0],
         elbounds = {
         w: parseInt($bg.width()), 
         h: parseInt($bg.height())
         },
         bounds = {w: 2350 - elbounds.w, h: 1750 - elbounds.h},
         origin = {x: 0, y: 0},
         start = {x: 0, y: 0},
         movecontinue = false;
         
         function move (e){
         var inbounds = {x: false, y: false},
         offset = {
         x: start.x - (origin.x - e.clientX), 
         y: start.y - (origin.y - e.clientY)
         };
         
         data.value = 'X: ' + offset.x + ', Y: ' + offset.y;
         
         inbounds.x = offset.x < 0 && (offset.x * -1) < bounds.w;
         inbounds.y = offset.y < 0 && (offset.y * -1) < bounds.h;
         
         if (movecontinue && inbounds.x && inbounds.y) {
         start.x = offset.x;
         start.y = offset.y;
         
         $(this).css('background-position', start.x + 'px ' + start.y + 'px');
         }
         
         origin.x = e.clientX;
         origin.y = e.clientY;
         
         e.stopPropagation();
         return false;
         }
         
         function handle (e){
         movecontinue = false;
         $bg.unbind('mousemove', move);
         
         if (e.type == 'mousedown') {
         origin.x = e.clientX;
         origin.y = e.clientY;
         movecontinue = true;
         $bg.bind('mousemove', move);
         } else {
         $(document.body).focus();
         }
         
         e.stopPropagation();
         return false;
         }
         
         function reset (){
         start = {x: 0, y: 0};
         $(this).css('backgroundPosition', 'center center'); //Basic Position
         }
         
         $bg.bind('mousedown mouseup mouseleave', handle);
         $bg.bind('dblclick', reset);



    });
</script>
<!-- //[JS-BGE]] Java Script (kit_background.php only) -->